import React,{useContext} from "react";
import "./index.css"
import useLocalContext from '../../tools/useLocalContext'
import settlement from "../../tools/settlement"
const AllProduct = (props) => {
  const {state,dispatch} = useContext(useLocalContext())

  const dispatchList=(name)=> {
    if(state.list.includes(name)){
      const detailList = state.detailList.map((item,index)=>{
        if(item.img===name){
          if(item.count){
            item.count = item.count + 1
          }else{
            item.count =1
          }
        }
        
        return item
      })
      dispatch({
        type:'detailList',
        detailList
      })
      return 
    }else{
      dispatch({
        type:'list',
        list: [...state.list,name]
      })
    }
  }

  return <div className="allProductContainer">
    <div className='productItem'>
      全部商品
      <span>
      {state.totalCount}
      </span>
    </div>
    <div className='addContent'>
      <div className='addProduct' 
        onClick={()=>{
          dispatchList('phone')
        }}
      >
        添加手机
      </div>
      <div className='addProduct' 
        onClick={()=>{
          dispatchList('mac')
        }}
      >
        添加电脑
      </div>
      <div className='addProduct' 
        onClick={()=>{
          dispatchList('key')
        }}
      >
        添加键盘
      </div>
    </div>
    <div className='productCount'>
      已选商品{props.checkedCount}（不包含运费）
      <span className='totalNumber'>
        {props.checkedPrice}
      </span>
      <span
        className={props.checkedCount>0 ? 'totalButton totalButtonActive' : 'totalButton'}
        onClick={() => { 
          settlement(props.checkedCount,dispatch)
        }}
      >
        结算
      </span>
    </div>
  </div>
}

export default AllProduct
